<template>
    <div class="w-100 h-100">
        <div class="w-100 h-5 fs-24" style="border-bottom: 1px solid rgb(235, 239, 246)">
            <div class="ml-16 mt-8" style="font-weight: bold">户口信息登记</div>
        </div>
        <div class="w-80 h-95 m-auto">
            <div class="w-60 h-100 mt-16">
                <Form :model="formItem" :label-width="180">
                    <FormItem label="户口类型">
                        <Select v-model="formItem.account_type" placeholder="请选择户籍类型">
                            <Option value="beijing">农村户口</Option>
                            <Option value="shanghai">城市户口</Option>
                            <Option value="shenzhen">城村结合户口</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="户口地址">
                        <Select class="w-45" v-model="formItem.account_addres.province" placeholder="选择省份">
                            <Option value="beijing">河南</Option>
                            <Option value="shanghai">北京</Option>
                            <Option value="shenzhen">上海</Option>
                        </Select>
                        <Select class="w-50 float-right" v-model="formItem.account_addres.city" placeholder="选择城市">
                            <Option value="beijing">郑州</Option>
                            <Option value="shanghai">北京</Option>
                            <Option value="shenzhen">天津</Option>
                        </Select>
                    </FormItem>
                    <FormItem>
                        <Input v-model="formItem.account_addres.detailed" placeholder="请填写户口详细地址"></Input>
                    </FormItem>
                    <FormItem label="情况说明">
                        <Input v-model="formItem.textarea" type="textarea" :autosize="{ minRows: 8, maxRows: 8 }" placeholder="(选填)200字以内"></Input>
                    </FormItem>
                    <FormItem label="上传证明材料">
                        <span style="color: rgba(51, 51, 51, 0.4)">最多上传三张图片，相关户口迁移的证明材料供审核时参考</span>
                    </FormItem>
                    <FormItem>
                        <Upload show-upload-list multiple :on-success="uploadFileSuccess" :on-error="uploadFileSuccess" type="drag" action="//jsonplaceholder.typicode.com/posts/">
                            <div style="padding: 20px 0">
                                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                                <p>将文件拖拽到此处</p>
                            </div>
                        </Upload>
                    </FormItem>
                    <FormItem>
                        <Button type="primary">确定保存</Button>
                    </FormItem>
                </Form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            formItem: {
                account_type: '',
                account_addres: {
                    province: '',
                    city: '',
                    detailed: ''
                },
                account_fact_sheet: '',
                account_prove: ''
            }
        };
    },
    methods: {
        uploadFileSuccess(res, file) {
            console.log(res);
            console.log(file);
        }
    }
};
</script>
